<template>
    <div class="app">
        <el-col >
            <el-row :span="24" class="title">
                <span > 表单表格切换 </span>
                <form-item-factory v-model="type" :options="radioOptions" type="radio" style="display:inline"></form-item-factory>
            </el-row>
            <el-row :span="24" v-if="type === 'form'">
                <component :is="components['form']" :formGroups="formGroups" v-model="data" label-width="130px">
                </component>
            </el-row>
            <el-row :span="24" v-else>
                <component :is="components['table']" >
                    <template #hh>
                    </template>
                </component>
            </el-row>
        </el-col>
    </div>


</template>

<script>
import {createFormOptions} from "@/const";

export default {
    name: 'App',
    data() {
        return {
            radioOptions: [
                {
                    label: '表单',
                    value: 'form'
                },
                {
                    label: '表格',
                    value: 'table'
                },
            ],
            components: {
                form: () => import('./components/Form'),
                table: () => import('./components/Table')
            },
            type: 'form',
            data:{}
        }
    },
    updated () {
        // console.log(this)
    },
    computed:{
        formGroups(){
            return createFormOptions()
        }
    }
}
</script>

<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
.app{
    margin: 24px auto;
    width:60%;
    .title{
        margin:24px;
    }

}
</style>
